<template>
	<!-- <u-navbar placeholder v-bind="$attrs" :leftIcon="none" :title="title" @leftClick="leftClick" :autoBack="autoBack">
		<template v-if="showLeft">
			<template #left>
				<u-icon name="arrow-left" size="19"></u-icon>
			</template>
		</template>
	</u-navbar> -->
	<view class="page-view flexc">
		<uni-nav-bar :title="title" statusBar @clickLeft="leftClick" v-bind="$attrs" />
		<view class="page-view-content flex1">
			<slot></slot>
		</view>
		<view class="page-view-tabber ">
			<u-tabbar
				:value="selectIndex"
				:fixed="true"
				:placeholder="true"
				:safeAreaInsetBottom="true"
			>
				<u-tabbar-item v-for="(item,index) in tabbarList" :key="index"  :text="item.title" :badge="index===2&&badge?badge:0" :icon="item.icon" @click="clickTabbar(index)" ></u-tabbar-item>
				<!-- <u-tabbar-item text="放映厅" icon="photo" @click="click1" ></u-tabbar-item>
				<u-tabbar-item text="直播" icon="play-right" @click="click1" ></u-tabbar-item>
				<u-tabbar-item text="我的" icon="account" @click="click1" ></u-tabbar-item> -->
			</u-tabbar>
		</view>
	</view>
</template>

<script>
import { computed, defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
	props: {
		title: {
			//标题
			type: String,
			default: '首页'
		},
		autoBack: {
			//是否自动返回上一页
			type: Boolean,
			default: () => false
		},
		showLeft: {
			//是否展示左侧返回箭头
			type: Boolean,
			default: () => false
		},
		current: {
			type: [Number, String],
			default: 0
		}, // 页面的类型数据说明
		badge:{
			type:Number,
			default:0
		}
	},
	setup(props) {
		const data = reactive({
			selectIndex:computed(()=>props.current),
			tabbarList:[
				{
					current:0,
					title:'首页',
					icon:'home',
					selectIcon:'',
					page:'/pages/index/index',
					
				},
				{
					current:1,
					title:'点单',
					icon:'home',
					selectIcon:'',
					page:'/pages/order/order',
					
				},
				{
					current:2,
					icon:'home',
					title:'购物车',
					selectIcon:'',
					page:'/pages/shop/shop',
					
				},
				{
					current:3,
					title:'我的',
					icon:'home',
					selectIcon:'',
					page:'/pages/my/my',
					
				}
			]
		});
		const leftClick = () => {
			uni.navigateBack();
		};
		const clickTabbar = (index=>{
			console.log(index,'e-=');
			if (index != data.selectIndex) {
				uni.redirectTo({
					url: data.tabbarList[index].page
				});
			}
		})
		return {
			...toRefs(data),
			leftClick,
			clickTabbar
		};
	}
});
</script>

<style lang="scss">
	page{
		height:100%;
	}
	.page-view{
		width: 100%;
		height:100%;
	}
</style>
